<template>
  <div class="dashboard-container">
    <el-row class="row1" type="flex" justify="left">
      <el-col :span="8">
        <p style="font-size: larger">个人信息</p>
      </el-col>
    </el-row>
    <el-divider></el-divider>
    <div class="user_form">
      <el-form ref="form" :model="UInfo" label-width="80px">
        <el-form-item label="用户">
          <p class="email-style">{{ UInfo.id }}</p>
        </el-form-item>
        <el-form-item label="呢称" :required="true">
          <el-input type="text" v-model="UInfo.userName"></el-input>
        </el-form-item>
        <el-form-item label="密码" :required="true">
          <el-input v-model="UInfo.password" show-password></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <p class="email-style">{{ UInfo.email }}</p>
          <span style="margin-left: 15px">
            <el-button class="proButton" @click="showDialog" size="mini">修改</el-button> 
          </span>
        </el-form-item>
        <el-alert
          style="width: 50%;color: #9c631d;margin-left: 4%"
          type="warning"
          :closable="false"
        >
          <template slot="title">
            <div style="font-size: 120%">温馨提示:</div>
            <div>1.修改完信息后需要重新登录。</div>
            <div>2.修改邮箱后不需要重新登录。</div>
          </template>
        </el-alert>
        <el-form-item label="  ">
          <span><el-button class="proButton" @click="sureUser">确定</el-button></span>
          <span style="margin-left: 30px"><el-button @click="Return">取消</el-button></span>
        </el-form-item>
      </el-form>
    </div>
    <!-- 修改邮箱弹窗 -->
    <el-dialog
      title="修改邮箱"
      :visible.sync="dialogVisible"
      width="30%">
      <el-form
          ref="sendCodeForm"
          :model="newForm"
          class="register-form"
          size="mini"
        >
        <el-form-item prop="eamil">
            <el-input
              v-model.trim="newForm.eamil"
              type="text"
              placeholder="请输入新邮箱"
              show-word-limit
              autocomplete="off"
            >
              <svg-icon slot="prefix" icon-class="email" icon="icon"></svg-icon>
            </el-input>
        </el-form-item>
        <el-form-item prop="emailCode" style="position: relative">
            <el-input
              v-model.trim="newForm.emailCode"
              type="text"
              placeholder="验证码"
            >
              <svg-icon slot="prefix" icon-class="email-open"></svg-icon>
            </el-input>
            <el-button
              type="primary"
              class="show-pwd phone-code proButton"
              :disabled="isGetphone"
            >
              <span v-show="!isGetphone" @click="sendCodeByEamin">发送验证码</span>
              <span v-show="isGetphone" class="count">重新获取({{count}})s</span>
            </el-button>
          </el-form-item>
        </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button @click="updateEamin" class="proButton" type="primary" >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import { isEmail } from '@/utils/validate'
import { getUserById, updateUser, sendCode, updateMail } from '@/api/user'
const TIME_COUNT = 60 // 倒计时的时间

export default {
  name: "personalInfo",
  data() {
    return {
      UInfo: {
       
      },
      dialogVisible: false, //修改邮箱的弹窗
      newForm:{
        eamil:'',
        emailCode: '',
      },
      isGetphone: false,
      count: "",
    };
  },
  computed:{
    ...mapGetters(['userInfo'])
  },
  methods:{
    Return(){
      this.$router.go(-1);
    },
    //获取用户信息
    getUser(){
      getUserById({id: this.userInfo.id}).then(res =>{
        this.UInfo = res.data
        console.log(this.UInfo)
      })
    },
    //确定修改用户信息
     sureUser(){
      updateUser(this.UInfo).then(res =>{
        this.$message({type: 'success',message: res.msg});
        this.$store.dispatch('user/logout')
        this.$router.go(0)
      })
    },
    showDialog(){
      this.dialogVisible = true
      this.newForm = {
        eamil:'',
        emailCode: '',
      }
    },
    // 修改邮箱成功
    updateEamin(){ 
      updateMail({id : this.userInfo.id,email: this.newForm.eamil},this.newForm.emailCode).then(res =>{
        if(res.code === '400'){
          this.$message({type: 'error',message: res.msg})
        }else{
          this.dialogVisible = false
          this.$message({type: 'success',message: res.msg})
          this.getUser();
        }
      })
    },
    //发送验证码
    sendCodeByEamin(){
      if (!isEmail(this.newForm.eamil)){
        this.$message({type: 'error',message: '请输入正确的邮箱'})
        return
      }
      this.isGetphone = true
      sendCode(this.newForm.eamil).then(response => {
        this.$message(response.msg.toString());
      }).catch(error=>{
        console.log(error);
      })
      // 验证码倒计时
        if (!this.timer) {
          this.count = TIME_COUNT
          this.isGetphone = true
          this.getPhoneIntval = setInterval(() => {
            if (this.count > 0 && this.count <= TIME_COUNT) {
              this.count--
            } else {
              this.isGetphone = false
              clearInterval(this.getPhoneIntval)
              this.getPhoneIntval = null
            }
          }, 1000)
        }
    }
  },
  mounted(){
    this.getUser();
  }
};
</script>

<style lang="scss" scoped>
.row1{
  min-width: none;
}
.user_form{
  width: 60%;
  margin-left: 10%;
}
.email-style{
  display: inline-block;
  vertical-align: top;
  line-height: 14px;
  min-width: 160px;
}
.register-form {
      position: relative;
      max-width: 100%;
      overflow: hidden;

      .forget-password {
        width: 100%;
        text-align: left;

        .forget-password {
          width: 129px;
          height: 19px;
          font-size: 20px;
          font-weight: 400;
          color: rgba(92, 102, 240, 1);
        }
      }

      .per-code {
        width: 100px;
        height: 36px;
        font-size: 20px;
        line-height: 36px;
        color: #fff;
        text-align: center;
        cursor: pointer;
        background: #bbc1ce;
      }

      .phone-code {
        width: 120px;
        height: 36px;
        font-size: 14px;
        color: #fff;
        border-radius: 3px;
      }
    }

    .tips {
      margin-bottom: 10px;
      font-size: $base-font-size-default;
      color: $base-color-white;

      span {
        &:first-of-type {
          margin-right: 16px;
        }
      }
    }

    .title-container {
      position: relative;

      .title {
        margin: 0 auto 40px auto;
        font-size: 34px;
        font-weight: bold;
        color: $base-color-blue;
        text-align: center;
      }
    }

    .svg-container {
      position: absolute;
      top: 14px;
      left: 15px;
      z-index: $base-z-index;
      font-size: 16px;
      color: #d7dee3;
      cursor: pointer;
      user-select: none;
    }

    .show-pwd {
      position: absolute;
      top: 14px;
      right: 25px;
      font-size: 16px;
      color: $base-font-color;
      cursor: pointer;
      user-select: none;
    }

    ::v-deep {
      .el-form-item {
        padding-right: 0;
        margin: 20px 0;
        color: #454545;
        background: transparent;
        border: 1px solid transparent;
        border-radius: 2px;

        &__content {
          min-height: $base-input-height;
          line-height: $base-input-height;
        }

        &__error {
          position: absolute;
          top: 100%;
          left: 18px;
          font-size: $base-font-size-small;
          line-height: 18px;
          color: $base-color-red;
        }
      }

      .el-input {
        box-sizing: border-box;

        .el-input__count {
          .el-input__count-inner {
            background: transparent;
          }
        }

        .el-input__prefix {
          left: 15px;
          line-height: 56px;

          .svg-inline--fa {
            width: 20px;
          }
        }

        input {
          height: 58px;
          padding-left: 45px;
          font-size: $base-font-size-default;
          line-height: 58px;
          color: $base-font-color;
          background: #f6f4fc;
          border: 0;
          caret-color: $base-font-color;
        }
      }
    }
</style>
